// app/(tabs)/crawl.js
import React, { useState } from 'react';
import {Platform, View, Text, TextInput, StyleSheet, TouchableOpacity, ActivityIndicator,Alert} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import DropDownPicker from 'react-native-dropdown-picker';

import { api } from '@/utils/request/Api';
import Loading from '@/components/Loading';
import { router } from 'expo-router';
export default function CrawlScreen() {
  const [open, setOpen] = useState(false);
  const [url, setUrl] = useState('');
  const [depth,setDepth] = useState("2");
  const [loading, setLoading] = useState(false);
  const [depthItems, setDepthItems] = useState([
    { label: 'Depth 1', value: '1' },
    { label: 'Depth 2', value: '2' },
    { label: 'Depth 3', value: '3' },
    { label: 'Depth 4', value: '4' },
    { label: 'Depth 5', value: '5' },
  ]);
  const handleCrawl = async () => {
    if (!url) return;
    setLoading(true);
    // 模擬等待 API 回應
    
    api.post("crawl/store",{data:{url:url,depth:depth}}).then((res) => {
        setLoading(false);
        router.push(`/emails?crawlId=${res.data.crawl_id}`);
        if(res.code == 1){
          if(Platform.OS === 'web'){
              alert("Crawl emails count: " + res.data.count);
              if(res.data.count > 0){
                    router.push(`/emails?crawlId=${res.data.crawl_id}`);
              }
          }else{
            Alert.alert("Tip","Crawl emails count: " + res.data.count,[
            {
                text: "ok",
                onPress: () => {
                  if(res.data.count > 0){
                    router.push(`/emails?crawlId=${res.data.crawl_id}`);
                  }
                }
              }
          ]);
          }
         
        }else{
          if(Platform.OS === 'web'){
            alert("Crawl emails count: 0");
          }else{
            Alert.alert("Crawl emails count: 0");
          }
        }
    }).catch(() => {setLoading(false);})
    //setTimeout(() => setLoading(false), 1500);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Email Hunter</Text>
      <Text style={styles.subtitle}>Enter Website URL</Text>
      <Text style={styles.desc}>Enter the URL of a website to crawl for email addresses</Text>

      <View style={styles.inputContainer}>
        <Ionicons name="globe-outline" size={18} color="#888" style={styles.icon} />
        <TextInput
          placeholder="example.com or https://..."
          value={url}
          onChangeText={setUrl}
          style={styles.input}
        />
      </View>
      <View style={styles.depth}>
        <DropDownPicker 
          style={styles.depthbox} 
          items={depthItems} 
          open={open} 
          value={depth} 
          setOpen={setOpen} 
          setValue={setDepth}
          containerStyle={{ height: 40 }}
          dropDownContainerStyle={{borderColor:'#eee'}}
        />
      </View>

      <TouchableOpacity style={styles.button} onPress={handleCrawl} disabled={loading}>
        <Text style={styles.buttonText}>🔍 Crawl Website</Text>
      </TouchableOpacity>
      
      <View style={styles.tipsBox}>
        <Text style={styles.tipTitle}>Tips:</Text>
        <Text style={styles.tip}>• Enter a full domain (example.com)</Text>
        <Text style={styles.tip}>• Include https:// for specific pages</Text>
        <Text style={styles.tip}>• Larger sites may take longer to crawl</Text>
      </View>

      {loading && <Loading />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff', padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginTop: 60, marginBottom: 10, textAlign: 'center' },
  subtitle: { fontSize: 18, fontWeight: '500', textAlign: 'center' },
  desc: { fontSize: 14, color: '#666', textAlign: 'center', marginVertical: 8 },
  inputContainer: {
    flexDirection: 'row', alignItems: 'center', backgroundColor: '#f0f0f0',
    borderRadius: 8, paddingHorizontal: 10, marginTop: 16, height: 50
  },
  icon: { marginRight: 6 },
  input: { flex: 1, fontSize: 16 },
  button: {
    backgroundColor: '#3B82F6', borderRadius: 8, paddingVertical: 14, alignItems: 'center', marginTop: 30
  },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
  tipsBox: { backgroundColor: '#F9FAFB', padding: 12, borderRadius: 8, marginTop: 24 },
  tipTitle: { fontWeight: 'bold', marginBottom: 4 },
  tip: { fontSize: 13, color: '#555' },
  depth:{
      marginTop:15,
      width:'50%',
      height:40,
  },
  depthbox:{
    borderWidth:1,
    borderColor:"#eee",
    paddingTop:0,
    paddingBottom:0,
    marginBottom:0,
    marginTop:0,
       
  }
});